<template>
	<view class="content">
		<view v-if="list && list.length>0">
			<view class="block" v-for="(item,index) in list" @click="navigate('/page_other/registration/form_3?id='+item.id)">
				<image v-if="item.sex == '女'" :src="cloudStorage+'/home/female.png'" class="menu-icon"></image>
				<image v-if="item.sex == '男'" :src="cloudStorage+'/home/male.png'" class="menu-icon"></image>
				<view class="menu-name">{{item.name}}</view>
				<view style="color: darkgray;font-size: 32rpx;margin-left: 40rpx;">{{item.mobile}}</view>
			</view>
		</view>
		<view v-else class="empty">您暂未添加农村劳动力调查，请添加</view>
		
		<view class="btn-item">
			<view class="btn1" @click="navigate('/page_other/registration/form_3')">添加</view>
		</view>
	</view>
</template>

<script>
	import {
		getTrainInvestigateListByUserIdApi
	} from '@/api/registration.js'
	export default {
		data() {
			return {
				list: []
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			getList() {
				getTrainInvestigateListByUserIdApi().then((res) => {
					this.list = res ?? []
				})
			}
		},
		onLoad() {
			this.getList()
		}

	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		padding: 30rpx;
		.btn-item {
			display: flex;
			justify-content: space-between;
			position: fixed;
			transform: translate(-50%, -50%);
			left: 50%;
			bottom: 0rpx;
			z-index: 999999;

			.btn {
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #0256FF;
				border: 1px solid #0256FF;
				background-color: #fff;
				font-size: 28rpx;
				border-radius: 40rpx;
				width: 180rpx;
				margin-right: 30rpx;
			}

			.btn1 {
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #0256FF;
				color: #fff;
				font-size: 28rpx;
				border-radius: 40rpx;
				width: 340rpx;
			}
		}
		.block {
			background: #fff;
			width: 100%;
			padding: 40rpx;
			height: 160rpx;
			box-shadow: 0px 0px 4px #ccc;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.menu-icon {
				width: 100rpx;
				height: 100rpx;
			}

			.menu-name {
				margin-left: 40rpx;
				font-size: 18px;
				width: calc(100% - 400rpx);
			}

			.arrow {
				color: #c6c6c6;
				text-align: right;
				width: 70rpx;
				height: 100rpx;
				line-height: 100rpx;
			}

		}
	}
</style>
